<template>
    <div style="width: 100%" v-loading="loading">
        <el-row  :gutter="20" >
            <el-col :span="6" v-for="(item, index) in sortList" :offset="1" style="padding: 10px">
                <el-card :body-style="{ padding: '10px' }">
                    <router-link :to="  '/movie/'+item.aid  ">
                    <img :src="item.pic" style="width:100%;height:200px" />
                    <div style="padding: 14px;">
                        <span>{{item.title}}</span>
                    </div>
                        </router-link>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-pagination
                        @currentchange="handleCurrentChange"
                        :current-page="page"
                        :page-size="pagesize"
                        layout="total, prev, pager, next"
                        v-bind:total="results">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {bangumiApi} from '../apis/bangumi.js';
    //分类排行查看
    export default {
        data () {
            return {
                loading :true,
                sortList:[]
            }
        },
        mounted() {



            this.refreshSorts(this.$route.params.tid,this.$route.params.page,this.$route.params.pagesize)

        },
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
                this.refreshSorts(to.params.tid,to.params.page,to.params.pagesize)
            }
        },
        methods:{
            refreshSorts(tid,page,pagesize){
                this.loading =true;
                bangumiApi.getSortList(tid,page,pagesize)
                        .then(function (ret) {


                            this.sortList =ret.list;
                            this.pages=ret.pages;
                            this.page=page;
                            this.loading=false;
                            this.results =ret.results;

                        }.bind(this))

            },
            handleCurrentChange(val) {

                this.$router.replace('/sort/'+this.$route.params.tid+'/'+this.$route.params.sortname+'/'+val+'/10' )
            }
        }
    }
</script>
<style>
</style>
